<template>
	<div class="r-orders-details content">
	    <div class="cloud-header">
	      <h2 class="r-title-h2">订单详情</h2>
	    </div>

	    <div class="cloud-body">
			<!-- <div class="r-orders-status">
				<i class="iconfont icon-jinggao icon-color"></i>
				订单状态：{{data.order_status === 0?'进行中':data.order_status === 3?'已取消':'已完成'}}
				 <Button class="r-cancel-button" text-color="primary" @click="intCancel"><i class="iconfont icon-cancel r-submit-icon"></i>取消预约</Button>
			</div> -->
			<div class="r-orders-item">
				<div class="r-info-title">订单信息：</div>
				<div class="r-orders-info">
					<p><span>订单编号：{{ data.order_sn }}</span><span>订单状态：{{data.order_status === 0?'进行中':data.order_status === 3?'已取消':'已核销'}}</span></p>
					<p><span>提交时间：{{ data.creation_time }}</span><span  v-if="data.order_status === 1">核销时间：{{ data.update_time }}</span></p>
					<!-- <p><span>赠送积分：24</span></p> -->
				</div>
			</div>

			<div class="r-orders-item">
				<div class="r-info-title">买家信息：</div>
				<div class="r-orders-info">
					<p><span>用户名称：{{ data.buyer_info.nickname || "匿名" }}</span><span>用户手机：{{ data.buyer_info.mobile }}</span></p>
				</div>
			</div>

			<div class="r-orders-item">
				<div class="r-info-title">商品信息：</div>
				<div class="r-orders-info">
			 		<Table :datas="data.goods_list" class="r-table-main" :checkbox="false" :stripe="false" :loading="false" selectWhenClickTr>
			          <TableItem title="商品名称" prop="name" :width="200"></TableItem>
			          <TableItem align="center" title="产品图">
			          	<div slot-scope="{data}">
			          		<img :src="data.image_list[0]" class="r-table-image" />
			          	</div>
			          </TableItem>
			          <TableItem title="规格">
			          	<div slot-scope="{data}">
			          		{{ data.select.spce_name }}
			          	</div>
			          </TableItem>
			          <TableItem title="单价（元）">
			          	<div slot-scope="{data}">
			          		{{ data.select.price }}
			          	</div>
			          </TableItem>
			          <TableItem title="折扣">
			          	<div slot-scope="{data}">
			          		{{ data.select.price_discount }}
			          	</div>
			          </TableItem>
			          <TableItem title="折后价">
			          	<div slot-scope="{data}">
			          		{{ data.select.discount_price }}
			          	</div>
			          </TableItem>

			          <TableItem title="数量" prop="number"></TableItem>
			          <div slot="empty">暂时无数据</div>
			        </Table>
				</div>
			</div>
			<div class="r-orders-item">
				<div class="r-orders-info">
					<dl class="r-orders-total">
						<dd><label>订单金额：</label><span>￥{{data.amount_payable}}</span></dd>
						<dd><label>优惠金额：</label><span>-￥{{data.discount_payable}}</span></dd>
						<dd class="r-total-blod"><label>实付金额：</label><span>￥{{data.amount_payment}}</span></dd>
					</dl>
				</div>
			</div>
	    </div>
	</div>
</template>
<script type="text/javascript">
	export default {
		name:'order_details',
		data (){
			return {
				order_sn:'',
				data:{
					buyer_info:{
						nickname:'',
					}
				},
			}
		},
		mounted(){
			this.order_sn = this.$route.query.order_sn;
			if(this.order_sn){
				this.getOrdersDetails()
			}else{
				history.back();
			}
		},
		methods:{
			/**
			 * 获取订单详情
			 * @return {[type]} [description]
			 */
			getOrdersDetails(){
				this.$cloud.orders().query(this.order_sn).then(data=>{
					this.data = data;
					console.log('data',data);
				}).catch(res =>{
					console.log('错误',res)
				})
			},

			/**
			 * 取消预约
			 * @return {[type]} [description]
			 */
			intCancel(){
				console.log('取消预约');
			}
		},
	}
</script>
<style type="text/css" lang="less">
.cloud-header{
	margin-bottom: 20px;
}
.r-title-h2{
	border-left: solid 5px #2d7bf4;
	padding-left: 10px;
	margin-bottom: 0px !important;
}
.r-orders-details{
	.r-orders-status{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		min-height:46px;
		padding-bottom: 15px;
		border-bottom: solid 1px #efefef;
		.icon-color{
			color:#ff8710;
			font-size: 32px;
			margin-right: 10px;
		}
		.r-cancel-button{
			margin-left: 20px;
		}
	}
	.r-orders-item{
		border-bottom: solid 1px #efefef;
		padding-bottom: 10px;
		margin-top: 20px;
		.r-info-title{
			font-size: 16px;
			font-weight: bold;
			border-left: 2px solid #2d7bf4;
			padding-left: 5px;
			line-height: 16px;
		}
		.r-orders-info{
			color: #666;
			>p{
				margin-top: 20px;
				span{
					width: 300px;
					display: inline-block;
				}
			}
		}
		.r-orders-total{
			text-align: right;
			line-height: 32px;
			span{
				display:inline-block;
				width:100px;
				text-align: left;
			}
			label{
				width: 200px;
				display: inline-block;
				text-align: right;
			}
			.r-total-blod{
				font-weight: bold;
				color: red;
			}
		}
	}
  	.r-table-main {
    	border: none;
		margin-top: 20px;
    	th {
      		background-color: #fff;
    	}
    	.r-table-image{
    		width: 100px;
    		height: auto;
    	}
  	}
}


</style>